import 'package:flutter/material.dart';
import 'dart:typed_data';

void main() {
  runApp(ContainerDemoApp());
}

class ContainerDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '容器类组件演示',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: ContainerDemoHome(),
    );
  }
}

class ContainerDemoHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('第五章 容器类组件示例')),
      body: Center(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 标题容器：Padding+DecoratedBox组合
              Container(
                margin: EdgeInsets.only(bottom: 30),
                child: DecoratedBox(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(12),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.3),
                        spreadRadius: 2,
                        blurRadius: 5,
                        offset: Offset(0, 3),
                      ),
                    ],
                  ),
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
                    child: Text(
                      '容器类组件核心功能演示',
                      style: TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                        color: Colors.blue[800],
                      ),
                    ),
                  ),
                ),
              ),

              // 示例1：Padding容器的内边距效果
              Container(
                margin: EdgeInsets.only(bottom: 30),
                width: double.infinity,
                child: Card(
                  elevation: 3,
                  child: Column(
                    children: [
                      ListTile(
                        title: Text('1. Padding容器 - 内边距演示',
                            style: TextStyle(
                                fontSize: 18, fontWeight: FontWeight.bold)),
                      ),
                      // Padding包裹Row，演示不同方向内边距
                      Padding(
                        padding: EdgeInsets.all(20), // 四周内边距20
                        child: Container(
                          color: Colors.grey[100],
                          child: Row(
                            children: [
                              // 无Padding的文本
                              Text('无内边距: ', style: TextStyle(fontSize: 16)),
                              Text('Hello World',
                                  style: TextStyle(fontSize: 16)),
                            ],
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(20),
                        child: Container(
                          color: Colors.grey[100],
                          child: Row(
                            children: [
                              // 有Padding的文本（通过Padding包裹）
                              Padding(
                                padding: EdgeInsets.all(10), // 文本四周添加10px内边距
                                child: Text('有内边距: ',
                                    style: TextStyle(fontSize: 16)),
                              ),
                              Padding(
                                padding: EdgeInsets.all(10),
                                child: Text('Hello World',
                                    style: TextStyle(fontSize: 16)),
                              ),
                            ],
                          ),
                        ),
                      ),
                      // 不同方向的Padding演示
                      Padding(
                        padding: EdgeInsets.all(20),
                        child: Container(
                          color: Colors.grey[100],
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text('方向内边距演示:', style: TextStyle(fontSize: 16)),
                              Padding(
                                padding: EdgeInsets.only(left: 20), // 仅左侧内边距
                                child: Text('左内边距20px',
                                    style: TextStyle(fontSize: 16)),
                              ),
                              Padding(
                                padding: EdgeInsets.only(
                                    top: 10, bottom: 10), // 上下内边距
                                child: Text('上下内边距10px',
                                    style: TextStyle(fontSize: 16)),
                              ),
                              Padding(
                                padding: EdgeInsets.only(right: 20), // 仅右侧内边距
                                child: Text('右内边距20px',
                                    style: TextStyle(fontSize: 16)),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),

              // 示例2：DecoratedBox装饰容器
              Container(
                width: double.infinity,
                child: Card(
                  elevation: 3,
                  child: Column(
                    children: [
                      ListTile(
                        title: Text('2. DecoratedBox - 装饰容器演示',
                            style: TextStyle(
                                fontSize: 18, fontWeight: FontWeight.bold)),
                      ),
                      // 不同装饰效果的DecoratedBox
                      Padding(
                        padding: EdgeInsets.all(15),
                        child: Column(
                          children: [
                            // 渐变色背景
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                DecoratedBox(
                                  decoration: BoxDecoration(
                                    gradient: LinearGradient(
                                      colors: [Colors.red, Colors.orange],
                                      begin: Alignment.topLeft,
                                      end: Alignment.bottomRight,
                                    ),
                                    borderRadius: BorderRadius.circular(8),
                                  ),
                                  child: Padding(
                                    padding: EdgeInsets.symmetric(
                                        horizontal: 20, vertical: 10),
                                    child: Text('渐变背景',
                                        style: TextStyle(color: Colors.white)),
                                  ),
                                ),
                                DecoratedBox(
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                        color: Colors.blue, width: 2),
                                    borderRadius: BorderRadius.circular(8),
                                    boxShadow: [
                                      BoxShadow(
                                        color: Colors.blue.withOpacity(0.3),
                                        blurRadius: 5,
                                        offset: Offset(0, 2),
                                      ),
                                    ],
                                  ),
                                  child: Padding(
                                    padding: EdgeInsets.symmetric(
                                        horizontal: 20, vertical: 10),
                                    child: Text('边框+阴影',
                                        style: TextStyle(color: Colors.blue)),
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(height: 20),

                            // 圆形背景与图片装饰（使用颜色代替图片）
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                DecoratedBox(
                                  decoration: BoxDecoration(
                                    color: Colors.green.withOpacity(0.2),
                                    shape: BoxShape.circle,
                                  ),
                                  child: Padding(
                                    padding: EdgeInsets.all(25),
                                    child: Text('圆形背景',
                                        style: TextStyle(color: Colors.green)),
                                  ),
                                ),

                                // 用颜色块模拟图片装饰
                                DecoratedBox(
                                  decoration: BoxDecoration(
                                    image: DecorationImage(
                                      // 用颜色渐变模拟图片
                                      image: MemoryImage(Uint8List.fromList([
                                        0xFF, 0x33, 0x66, 0x99, // 蓝色渐变开始
                                        0xFF, 0x66, 0x99, 0xCC, // 蓝色渐变结束
                                      ])),
                                      fit: BoxFit.cover,
                                    ),
                                    borderRadius: BorderRadius.circular(8),
                                  ),
                                  child: Padding(
                                    padding: EdgeInsets.all(15),
                                    child: Text('模拟图片装饰',
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontWeight: FontWeight.bold)),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
